<template>
  <!-- 普通用户注册 -->
  <div class="cu-container">
    <!-- 头部 -->
    <div class="cu-header">用户注册</div>
    <!-- 注册信息 -->
    <div class="cu-form">
      <div class="cu-input">
        <span class="cu-input-tip"><i>*</i>用户类型：</span>
        <label for="cu-profession"><input type="radio" name="login-mode" value="profession" id="cu-profession" checked v-model="login_mode"> 专业</label>
        <label for="cu-student"><input type="radio" name="login-mode" value="student" id="cu-student" v-model="login_mode"> 学生</label>
      </div>
      <div class="cu-input">
        <span class="cu-input-tip"><i>*</i>姓名：</span>
        <input type="text" name="email" class="content-input" placeholder="您的真实姓名">
        <span class="cu-input-error">请输入真实姓名</span>
      </div>
      <div class="cu-input">
        <span class="cu-input-tip"><i>*</i>设置密码：</span>
        <input type="text" name="email" class="content-input" placeholder="数字和密码的组合">
        <span class="cu-input-error">密码不能为空</span>
      </div>
      <div class="cu-input">
        <span class="cu-input-tip"><i>*</i>确认密码：</span>
        <input type="text" name="email" class="content-input" placeholder="请再次输入密码">
        <span class="cu-input-error">密码不能为空</span>
      </div>
      <div class="cu-input" v-if="isPhone">
        <span class="cu-input-tip"><i>*</i>手机号：</span>
        <span class="cu-number">0086</span>
        <input type="text" name="email" class="content-input  cu-phone" placeholder="境外用户请使用邮箱注册">
        <span class="cu-input-error">请输入手机号</span>
      </div>
      <div class="cu-input" v-if="!isPhone">
        <span class="cu-input-tip"><i>*</i>邮箱：</span>
        <input type="text" name="email" class="content-input">
        <span class="cu-input-error">请输入邮箱</span>
      </div>
      <div class="pe-btn" @click="isPhone = !isPhone">{{isPhone ? '邮箱' : '手机'}}认证</div>
      <div class="cu-input">
        <span class="cu-input-tip"><i>*</i>滑块验证码：</span>
        <div class="cu-slide-container">
          <Slide :slideLineHeight="30" />
        </div>
      </div>
      <div class="cu-input">
        <span class="cu-input-tip"><i>*</i>{{isPhone ? '手机' : '邮箱'}}验证码：</span>
        <input type="text" name="email" class="content-input" style="width: 160px;">
        <div class="cu-captcha-btn">获取验证码</div>
        <span class="cu-input-error">请输入{{isPhone ? '手机' : '邮箱'}}验证码</span>
      </div>
    </div>
    <!-- 注册按钮 -->
    <div class="cu-btn">注册</div>
  </div>
</template>

<script>
import Slide from '@/components/Slide'
export default {
  name: 'CasualUser',
  components: {
    Slide,
  },
  data() {
    return {
      isPhone: true, // 认证方式是否为手机号验证
    }
  }
}
</script>

<style lang='less' scoped>
.cu-container {
  width: 890px;
  margin: 0 auto;
  background-color: #fff;
  padding-bottom: 1px;
  cursor: default;

  .cu-header {
    line-height: 60px;
    text-align: center;
    background-color: #1097f0;
    font-size: 22px;
    color: #fff;
  }

  .cu-form {
    margin-top: 17px;
    margin-left: 215px;

    &::after {
      content: "";
      display: block;
      width: 414px;
      border-bottom: 2px solid #1097f0;
      padding-bottom: 25px;
    }

    .cu-input {
      height: 50px;
      display: flex;
      align-items: center;
      position: relative;

      label,
      input,
      span {
        font-size: 16px;
        color: #333;
      }

      .cu-input-tip {
        width: 110px;
        text-align: right;
        display: inline-block;

        i {
          color: red;
        }
      }

      .cu-input-error {
        color: red;
      }

      label {
        margin-right: 20px;
      }

      .content-input {
        margin-right: 4px;
        width: 304px;
        height: 30px;
        border-radius: 6px;
        border: 1px solid #ccc;
        background-color: #fff;
        outline: none;
        padding: 5px 10px;
      }

      .cu-number {
        position: absolute;
        top: 17px;
        left: 120px;
        line-height: 16px;

        &::after {
          content: '|';
          position: absolute;
          top: -1px;
          left: 42px;
        }
      }

      .cu-phone {
        padding-left: 60px;
      }
    }

    .pe-btn {
      font-size: 16px;
      color: #0374bf;
      text-decoration: underline;
      margin-left: 350px;
      cursor: pointer;
    }

    .cu-slide-container {
      display: inline-block;
      width: 304px;
    }

    .cu-captcha-btn {
      width: 130px;
      margin-left: 8px;
      margin-right: 4px;
      height: 32px;
      line-height: 32px;
      background: #1097f0;
      border-radius: 3px;
      display: inline-block;
      text-align: center;
      font-size: 16px;
      color: #fff;
      cursor: pointer;
    }
  }

  .cu-btn {
    width: 300px;
    height: 32px;
    line-height: 32px;
    font-size: 16px;
    color: #fff;
    border-radius: 3px;
    background: #1097f0;
    text-align: center;
    margin: 10px auto;
    cursor: pointer;
  }
}
</style>